<template>
  <div class="container">
    <aside class="sidebar">
      <div class="user-section">
        <el-image
            v-if="userInfo.avatarPath"
            :src="toAddressable(userInfo.avatarPath)"
            fit="cover"
            style="width: 100px; height: 100px; border-radius: 50%; margin-bottom: 20px;"
            alt="用户头像" />

        <h3 class="user-name">{{ userInfo.username }}</h3>
      </div>
      <el-menu class="menu" default-active="1" router>
        <el-menu-item index="/usercenter/favoritescenter">
          <span>我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/usercenter/likecenter">
          <span>我的点赞</span>
        </el-menu-item>
        <el-menu-item index="/usercenter/historycenter">
          <span>历史记录</span>
        </el-menu-item>
        <el-menu-item index="/usercenter/userprofile">
          <span>账号设置</span>
        </el-menu-item>
      </el-menu>
    </aside>

    <main class="main-content">
      <header class="header">
        <div class="welcome">
          <h4>{{ userInfo.username }}，今天又是元气满满的一天~</h4>
        </div>
        <div class="stats">
          <!-- 可以添加统计信息或快捷操作按钮 -->
        </div>
      </header>
      <section class="content-area">
        <!-- 在这里放置子路由 -->
        <router-view />
      </section>
    </main>
  </div>
</template>

<script setup>
import { useUserStore } from '@/store/useUserStore';
import { useResource } from "@/hooks/useResource"; // 导入用户存储

// 获取用户存储
const userStore = useUserStore();
const { toAddressable } = useResource(); // 使用上传的 hook
const userInfo = userStore.userInfo; // 获取用户信息
</script>

<style scoped>
/* 容器 */
.container {
  display: flex;
  height: calc(100vh - 20px); /* 适应窗体高度并保留边距 */
  margin: 20px 50px; /* 上下20px，左右50px的间距 */
  max-width: 1200px; /* 最大宽度，防止内容过宽 */
  margin-left: auto;
  margin-right: auto; /* 居中对齐 */
}

/* 侧边栏 */
.sidebar {
  width: 20%;
  padding: 20px;
  text-align: center;
  border-radius: 10px; /* 设置圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  background: linear-gradient(to bottom, #a8d8f6, #e9ecef); /* 渐变背景 */
  transition: background-color 0.3s ease; /* 平滑背景颜色变化 */
}

.sidebar:hover {
  background: linear-gradient(to bottom, #b3e0ff, #e9ecef); /* 鼠标悬停时的渐变背景 */
}

.user-section {
  margin-bottom: 20px;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 增加文字阴影 */
}

.menu {
  border-radius: 5px; /* 设置圆角 */
  background: #fff; /* 菜单背景颜色 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 菜单阴影 */
}

.menu .el-menu-item {
  color: #6c757d; /* 文本颜色 */
  font-size: 14px;
  padding: 10px 20px;
  transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡 */
}

.menu .el-menu-item:hover,
.menu .el-menu-item.is-active {
  background-color: #e9ecef; /* 悬停或激活时的背景颜色 */
  color: #477ab5; /* 悬停或激活时的文本颜色 */
}

/* 主内容区 */
.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  border-radius: 10px; /* 设置圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  background: linear-gradient(to right, #faeded, #eaf0ff); /* 渐变背景 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #e9ecef; /* 分割线 */
  background: linear-gradient(to right, #eaf0ff, #f8f9fa); /* 渐变背景 */
}

.welcome h4 {
  font-size: 18px;
  color: #333;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 增加文字阴影 */
}

.stats {
  display: flex;
  align-items: center;
}

.stats > div {
  margin-left: 20px;
}

.content-area {
  flex: 1;
  background-color: #f8f9fa; /* 内容区域背景颜色 */
  padding: 20px;
  border-radius: 8px; /* 设置圆角 */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05); /* 内阴影 */
  background: linear-gradient(to bottom, #f8f9fa, #eaf0ff); /* 渐变背景 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    margin-bottom: 20px;
  }

  .main-content {
    width: 100%;
  }

  .user-name {
    font-size: 16px;
  }

  .menu .el-menu-item {
    font-size: 12px;
  }

  .welcome h4 {
    font-size: 16px;
  }
}
</style>